<template>
  <div class="full-box">
    <v-chart class="chart" :option="chartOption" autoresize/>
  </div>
</template>

<script>
import vChart from "vue-echarts";
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import {cloneDeep} from 'lodash'
import * as echarts from 'echarts'
import {mapper} from "@/package/options/chart/map/geoList";


export default {
  name: 'map01',
  cnName: '基础地图',
  mixins: [refreshMixin],
  components: {vChart},
  data() {
    return {
      chartOption: {},
      cptData: {}
    }
  },
  methods: {
    async registerMap() {
      const attribute = this.option.attribute
      const {province, city} = attribute.geo

      let path = 'china.json'
      let name = 'china'
      if (city) {
        name = city
        path = '/city/' + city + '00.json'
      } else if (province) {
        name = mapper[province]

        if (province.length > 2) {
          path = '/province/' + name + '.json'
        }
      }

      const data = await fetch('/geo/' + path).then(res => {
        return res.json()
      })
      echarts.registerMap(name, data)
      this.option.attribute.geo.map = name
    },
    async loadDataOk() {
      await this.registerMap()

      const attribute = this.option.attribute
      const clone = cloneDeep(attribute)

      if (!clone.visualMap.able) {
        delete clone.visualMap
      }
      const opt = {
        ...clone
      }

      this.setAreaColor(clone.geo.itemStyle)
      this.setAreaColor(clone.geo.emphasis.itemStyle)

      this.setFormatter(clone.geo.label)
      this.setFormatter(clone.geo.emphasis.label)

      const series = []
      this.addMapData(series, clone)
      this.addLines(series, clone)
      this.addEffectScatter(series, clone)

      opt.series = series
      this.chartOption = opt
    },
    // 地图底色
    setAreaColor(itemStyle) {
      if (itemStyle.colorType === '1') {
        itemStyle.areaColor = itemStyle.linear
      } else if (itemStyle.colorType === '2') {
        itemStyle.areaColor = itemStyle.radial
      }
    },
    addMapData(series, cloneAttribute) {
      if (!this.cptData.mapData || !cloneAttribute.mapData.show) {
        return
      }
      const {center, map, roam, aspectScale, zoom, label, itemStyle, emphasis, ...others} = cloneAttribute.geo

      cloneAttribute.geo = {
        map: map,
        center,
        aspectScale,
        zoom,
        ...others
      }
      series.push({
        type: 'map',
        zlevel: 1,
        mapType: map,
        center, roam, aspectScale, zoom,
        label: {
          ...label,
          ...cloneAttribute.mapData.label
        },
        itemStyle,
        emphasis,
        data: this.cptData.mapData
      })
    },
    addLines(series, cloneAttribute) {
      if (!this.cptData.lines || !cloneAttribute.lineData.show) {
        return
      }
      const lineData = []

      this.cptData.lines.forEach(line => {
        const start = {coord: line.start, value: line.value}
        const end = {coord: line.end}

        lineData.push([start, end])
      })

      const {symbol, symbolSize, color} = cloneAttribute.lineData

      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          color: color,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: symbol, //箭头图标
          symbolSize: symbolSize, //图标大小
        },
        lineStyle: {
          ...cloneAttribute.lineData.lineStyle
        },
        data: lineData
      })
    },
    addEffectScatter(series, cloneAttribute) {
      if (!this.cptData.effectScatter || !cloneAttribute.effectScatter.show) {
        return
      }
      this.setFormatter(cloneAttribute.effectScatter.label)
      series.push({
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 3,
        ...cloneAttribute.effectScatter,
        data: this.cptData.effectScatter
      })
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>

</style>
